<template>
  <div>
    <header class="headerCtn flexJuconSpBeAliCenter">
      <div class="flexAliCenter">
        <div class="title flexAliCenter">
          {{ queryType === '1' ? '' : '不' }}计重商品分拣<el-icon class="icon"
            ><ArrowDown
          /></el-icon>
        </div>
        <el-Space>
          <el-input
            style="width: 236px"
            v-model="goodsName"
            placeholder="搜索商品名"
            :prefix-icon="Search"
          />
          <!-- <el-input
            style="width: 236px"
            v-model="input"
            placeholder="搜索供应商 "
            :prefix-icon="Search"
          /> -->
          <!-- <el-switch v-model="value" inactive-text="图片分拣：" /> -->
        </el-Space>
      </div>
      <div class="right">
        更多筛选<el-icon class="icon"><ArrowRight /></el-icon>
      </div>
    </header>
    <div class="mainCtn" v-loading="loading">
      <div class="leftSide">
        <div v-for="(item, index) in filterList" :key="index" @click="sideClick(item)">
          <div :class="{ item: true, active: item.FNumber === leftActive }">
            <p>
              {{ item.children?.filter((item: any) => item.F_TEZV_JHSL >= item.FQty)?.length }}/{{
                item.children?.length
              }}
            </p>
            <p>
              {{ item.FName }}
            </p>
          </div>
        </div>
      </div>
      <div class="rightContent">
        <div class="flexJuconSpBeAliCenter">
          <div></div>
          <!-- <el-Space>
            <el-select v-model="value" style="width: 140px">
              <el-option label="全部备注" value="" />
              <el-option label="已备注" value="1" />
              <el-option label="未备注" value="2" />
            </el-select>
            <el-select v-model="value" style="width: 140px">
              <el-option label="全部线路" value="" />
            </el-select>
            <el-select v-model="value" style="width: 140px">
              <el-option label="全部标记任务" value="" />
              <el-option label="已标记" value="1" />
              <el-option label="未标记" value="2" />
            </el-select>
            <el-select v-model="value" style="width: 140px">
              <el-option label="所有供应商" value="" />
            </el-select>
          </el-Space> -->
          <el-Space>
            <el-Button type="primary" v-print="'#printAll'" @click="printFn(rightContent)"
              >打印全部标签</el-Button
            >
            <!-- <el-Button type="primary" plain
              >更多功能<el-icon class="icon"><ArrowDown /></el-icon
            ></el-Button> -->
          </el-Space>
        </div>
        <div style="margin-top: 15px">
          <span>分拣综述：{{ sortingOverview.num1 }}{{ rightContent[0]?.FUnitName }}</span>
          <span style="margin-left: 20px"
            >已分拣数：{{ sortingOverview.num2 }}{{ rightContent[0]?.FUnitName }}</span
          >
        </div>
        <div class="orderList" v-if="rightContent.length > 0">
          <div class="orderItem">
            <el-Space size="large" wrap>
              <GoodsBox
                v-for="(item, index) in rightContent"
                :key="item.FBillNo + Math.random()"
                :goodsInfo="item"
                :reset="reset"
              >
                <template #content>
                  <div
                    class="infoCard"
                    :style="{ background: item.F_TEZV_JHSL >= item.FQty ? '#86b04e' : '#88a4bb' }"
                  >
                    <div class="first">
                      <span>序号：{{ index + 1 }}</span
                      ><span :title="item.FCustName">{{ item.FCustName }}</span>
                    </div>
                    <div class="second">{{ item.FQty }} {{ item.FUnitName }}</div>
                    <div class="third">
                      <div>订单号：{{ item.FBillNo }}</div>
                      <div>已称重：{{ item.F_TEZV_JHSL }}{{ item.FUnitName }}</div>
                    </div>
                  </div>
                </template>
              </GoodsBox>
            </el-Space>
          </div>
        </div>
        <el-empty v-else :image-size="200" />
      </div>
    </div>
    <ShowNumCard />
    <PrintPage printId="printAll" :list="printInfo" />
  </div>
</template>

<script lang="ts" setup>
import PrintPage from '@/components/printPage.vue'
import { computed, onMounted, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import GoodsBox from '../components/goodsBox.vue'
import ShowNumCard from '../components/showNumCard.vue'
import { useGoodsStore } from '@/stores/goods'
import { queryGroupInfo } from '@/api/home'
import router from '@/router'
const checkAllList = ref<GoodsTypes.goodsInfo[]>([])
const filterList = ref<GoodsTypes.goodsInfo[]>([])
const leftActive = ref()
const rightContent = ref<GoodsTypes.goodsOrderInfo[]>([])
const queryType = ref('1')
const goodsName = ref('')
const loading = ref(false)
const printInfo = ref<any>([])

// 分拣综述
const sortingOverview = computed(() => {
  let num1 = 0
  let num2 = 0
  rightContent.value.forEach((item) => {
    num1 = +(num1 + item.FQty)
    num2 = +(num2 + item.F_TEZV_JHSL)
  })
  return { num1, num2 }
})

watch(
  () => router.currentRoute.value,
  (toPath) => {
    queryType.value = toPath.query.type as string
  },
  { immediate: true, deep: true }
)
watch(goodsName, (val) => {
  filterList.value = checkAllList.value.filter((item) => item.FName.includes(val))
  leftActive.value = filterList.value[0].FNumber
  sideClick(filterList.value[0])
})
onMounted(async () => {
  const goodsInfo = useGoodsStore().goodsInfo
  if (goodsInfo.length <= 0) {
    router.go(-1)
    return
  }
  const checkArr: GoodsTypes.goodsInfo[] = []
  goodsInfo.forEach((item) => {
    item.children.forEach((child) => {
      child.checkedCities.forEach((checked) => {
        checkArr.push(checked)
      })
    })
  })
  leftActive.value = checkArr[0].FNumber
  checkAllList.value = checkArr
  filterList.value = checkArr
  reset('')
})
const sideClick = (item: GoodsTypes.goodsInfo) => {
  leftActive.value = item.FNumber
  rightContent.value = item.children
}
// 获取公共参数
const returnCommonData = async (info: any) => {
  const res1: any = await queryGroupInfo({
    formid: 'SAL_SaleOrder',
    data: {
      FieldKeys:
        'FBillNo,FDate,F_TEZV_pszt,FMaterialId,FMaterialName,F_TEZV_SFCZ,FQty,F_TEZV_JHSL,FCustId,FCustId.FName,FUnitID.FName,FID,FStockUnitID.FNumber,FPriceUnitId.FNumber,FSaleOrderEntry_FEntryID,FMaterialId.Fnumber',
      FilterString: [
        {
          Left: '(',
          FieldName: 'F_TEZV_pszt',
          Compare: '=',
          Value: '分拣中',
          Right: ')',
          Logic: 'AND'
        },
        {
          Left: '(',
          FieldName: 'F_TEZV_sfzy',
          Compare: '=',
          Value: false,
          Right: ')',
          Logic: 'AND'
        },
        {
          Left: '(',
          FieldName: 'F_TEZV_sfcz',
          Compare: '=',
          Value: queryType.value === '1',
          Right: ')',
          Logic: 'AND'
        },
        {
          Left: '(',
          FieldName: 'FMaterialId.FNumber',
          Compare: '=',
          Value: info,
          Right: ')',
          Logic: 'AND'
        }
      ],
      OrderString: '',
      TopRowCount: 0,
      StartRow: 0,
      Limit: 2000,
      SubSystemId: '',
      formid: 'SAL_SaleOrder'
    }
  })
  let arr: GoodsTypes.goodsOrderInfo[] = []
  res1.forEach((item: string[]) => {
    let obj = {
      FBillNo: item[0],
      FDate: item[1],
      F_TEZV_pszt: item[2],
      FMaterialId: item[3],
      FMaterialName: item[4],
      F_TEZV_SFCZ: item[5],
      FQty: item[6],
      F_TEZV_JHSL: item[7],
      FCustId: item[8],
      FCustName: item[9],
      FUnitName: item[10],
      FNumber: info,
      FID: item[11],
      FStockUnitID: item[12],
      FPriceUnitId: item[13],
      FEntryID: item[14],
      FMaterialIdNum: item[15]
    }
    arr.push(obj)
  })
  return arr
}
const reset = async (leftActive: string) => {
  loading.value = true
  let goodsList = checkAllList.value
  if (!leftActive) {
    for (let index = 0; index < goodsList.length; index++) {
      const arr = await returnCommonData(goodsList[index].FNumber)
      goodsList[index].children = arr
    }
    rightContent.value = goodsList[0]?.children
  } else {
    const arr = await returnCommonData(leftActive)
    const info1 = filterList.value.filter((i) => i.FNumber === leftActive)[0]
    info1.children = arr
    rightContent.value = arr
  }

  loading.value = false
  console.log(goodsList, '1231')
}
const printFn = (val: any) => {
  printInfo.value = val
}
</script>

<style scoped lang="less">
.headerCtn {
  padding: 20px;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    line-height: 33px;
    margin-right: 10px;
    .icon {
      font-size: 14px;
      color: #798294;
      margin-left: 8px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    color: #127ffe;
    line-height: 25px;
  }
}

.item {
  width: 184px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 18px;
  color: #8994b6;
  padding: 8px 16px;
  cursor: default;
}
.active {
  background: linear-gradient(90deg, #4e86ff 0%, #4a60fe 100%);
  color: #fff;
}
.orderList {
  margin-top: 15px;
  .orderItem {
    .infoCard {
      padding: 10px;
      color: #fff;
      .first {
        font-size: 15px;
        line-height: 20px;
        display: flex;
        justify-content: space-between;
        span {
          &:first-of-type {
            width: 100px;
          }
          &:last-of-type {
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .second {
        font-size: 32px;
        font-weight: 500;
        line-height: 41px;
        text-align: center;
        margin: 35px 0;
      }
      .third {
        font-size: 14px;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
